<template>
  <rx-dialog @handOk="saveAll" @cancel="cancel" order="top" btnalign="right">
    <div slot="toolbar">
      <button @click="clearAll" class="ant-btn ant-btn-primary">{{$ti18('rxList.resetBtn','清空')}}</button>
      <button  @click="addInsClumnDef" class="ant-btn ant-btn-primary">{{i18n('list.addColumn','增加栏目')}}</button>
      <button  @click="preview" class="ant-btn ant-btn-primary">{{i18n('list.portalPreview','门户预览')}}</button>
    </div>
    <grid-layout
      :layout.sync="layout"
      :col-num="24"
      :row-height="2"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item v-for="item in layout"
                 :x="item.x"
                 :y="item.y"
                 :w="item.w"
                 :h="item.h"
                 :i="item.i"
                 :key="item.i"
      >
        <div class="gridLayoutClass">
          <div class="headPClass">
            <h1 style="display: inline-block;line-height: 40px;font-size: 14px;margin: 0">{{item.layoutName}}</h1>
            <div style="float: right">
              <span class="btnSpan" @click="removeObj(item.i)">
                <a-icon type="close"></a-icon>
              </span>
            </div>
          </div>
          <div class="bodyDivClass">
          </div>
        </div>
      </grid-item>
    </grid-layout>

  </rx-dialog>
</template>
<script src="vue-grid-layout.umd.min.js"></script>
<script>
  import insPortalDefApi from '@/api/portal/core/insPortalDef';
  import insPortalDialogApi from '@/api/portal/core/insPortalDialog';
  import {BaseForm, RxDialog,Util,RxLayout} from "@lowcode/jpaas-common-lib";
  import VueGridLayout from 'vue-grid-layout';


  export default {
    name: 'InsPortalLayoutEdit',
    mixins: [BaseForm],
    components: {
      RxDialog, Util,RxLayout,insPortalDialogApi,
      GridLayout: VueGridLayout.GridLayout,
      GridItem: VueGridLayout.GridItem
    },
    data() {
      return {
        isRead:false,
        layout: [],
        indexNum:0,
        portId: "",
      }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"insPortalDef",key);
        },
      preview(){
        this.isRead=true;
        this.saveAll();
      },
      addInsClumnDef(){
        var self_=this;
          insPortalDialogApi.openInsCloumnDefDialog({
          curVm: this,data:{single:false}, widthHeight: ['800px','600px']
        },function(self_,data){
          if( self_.layout && self_.layout.length > 0 ){
            var maxDefaultHeight = self_.maxCount();
          }
          for(let i=0;i<data.length;i++){
              var sign = new Date().getTime() +i;
              var obj =data[i];
              var _h = maxDefaultHeight ? i * 16 + maxDefaultHeight : i * 16  ;
              var newLayout ={"x": 20, "y": _h, "w": 4, "h": 16, "i":sign,"colId": obj.colId,layoutName:obj.name};
              self_.layout.push(newLayout);
          }
        });
      },
      maxCount(){
          if(this.layout && this.layout.length > 0 ){
            let maxHeight = this.layout[0].y ;
            let _i = 0 ;
            for (let i in this.layout){
              let n = parseInt(i) + 1;
              if(this.layout[n] && maxHeight<this.layout[n].y ){
                 maxHeight = this.layout[n].y ;
                 _i = n ;
              }
            }
            let max = this.layout[_i].y + this.layout[_i].h ;
            return max ;
          }
      },
      clearAll(){
        this.layout=[];
        this.indexNum=0;
      },
      removeObj(layoutKey){
        for(var i=0;i<this.layout.length;i++){
          if(layoutKey == this.layout[i].i){
            this.layout.splice(i,1);
            break;
          }
        }
      },
      getDataList() {
        return insPortalDefApi.getListByPortalId(this.portId).then(res => {
          if(res){
            var  list = JSON.parse(res);
            this.layout.push(...list);
          }
        });
      },
      get(id) {
        this.clearAll();
        this.portId = id[0];
        this.getDataList();
        return insPortalDefApi.get(id);
      },
      save(values) {
        return insPortalDefApi.save(values);
      },
      saveAll(){
        var self_=this;
        var parameter={
          portId:this.portId,
          layoutList:this.layout
        }
        insPortalDefApi.saveAll(parameter).then (res => {
          if(!res.success){
            self_.$message.error(res.message);
            return;
          }
          if(self_.isRead){
            self_.isRead=false;
            insPortalDialogApi.openInsLayoutPreview({
              curVm: self_,data:{portId:self_.portId}, max:true
            });
          }else{
            Util.closeWindow(self_,"ok");
          }
        });
      }
    }
  }
</script>
<style lang="less" scoped>
  .ant-btn-primary{
    margin-right: 6px;
  }
  .btnSpan{
    border-radius: 10px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 18px;
    background: #1890ff;
    display: inline-block;
    margin-right: 6px;
    cursor:pointer;
  }
  .btnSpan i{
    color: #fff;
    font-size: 10px;
    margin-top: 3px;
  }
  .gridLayoutClass {
    background: #fff;
    border: 1px solid #ddd;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column
  }
  .headPClass{
    line-height: 40px;
    height: 40px;
    box-sizing: border-box;
    border-bottom:1px solid #ddd;
  }
  .bodyDivClass{
    flex: 1;
    position: relative;
    bottom: -2px;
  }

  .toolTabs {
    height: 100%;
  }

  ul, li {
    list-style: none;
  }
  .bodyDivClass .itmelist{
    display: flex;
    align-items: center;
  }
  .itmelist p{
    flex: 1;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .itmelist p:hover{
    color: #0000cc;
    cursor: pointer;
  }
  .bodyDivClass>ul{
    padding:0 10px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 1px;
    overflow: auto;
  }
  .itmelist{
    padding-left: 20px;
    position: relative;
    line-height: 30px;
  }
  .itmelist:before{
    content: "■";
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -2px;
    font-size: 8px;
    width: 8px;
    height: 8px;
    line-height: 8px;
    color: #ccc;
  }
  .itmelist b{
    font-style: normal;
    display: inline-block;
    padding: 4px 8px;

  }
</style>
